<template>
    <el-menu
        :default-active="defaultActive"
        class="my-menu-vertical"
        :collapse="props.isCollapse"
        router
        @open="handleOpen"
        @close="handleClose"
        @select="handleSelect"
    >
        <!-- <el-image 
            style="width: 3vw; height: 3vw; margin-top: 1vw; box-sizing: border-box; border-radius: 50%;" 
            :src="avatarImage" 
            fit="fill" 
        /> -->
        <!-- <template
            v-for="(item, index) in props.menuItems"
            :key="`0-${index}`"
        >
            <el-sub-menu 
                v-if="item.menuType == 'subMenu'"
                :index="item.routerPath"
            >
                <template #title>
                    <el-icon>
                        <component :is="item.iconName" />
                    </el-icon>
                    <span>{{ item.title }}</span>
                </template>
            </el-sub-menu>
            <el-menu-item-group 
                v-else-if="item.menuType == 'menuItemGroup'"
                :title="item.title"
            >
            </el-menu-item-group>
            <el-menu-item 
                v-else-if="item.menuType == 'menuItem'"
                :index="item.routerPath"
            >
                <el-icon>
                    <component :is="item.iconName" />
                </el-icon>
                <span>{{ item.title }}</span>
            </el-menu-item>
        </template> -->
        <HomeMenuItem :menuItems="props.menuItems" />
        



        <!-- <el-sub-menu index="/">
            <template #title>
                <el-icon>
                    <House />
                </el-icon>
                <span>首页</span>
            </template>
            <el-menu-item index="/index">
                <el-icon>
                    <House />
                </el-icon>
                <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/index2">
                <el-icon>
                    <Notification />
                </el-icon>
                <span>看板</span>
            </el-menu-item>
            <el-menu-item index="1-3">
                <el-badge 
                    is-dot 
                    :offset="[10, 25]"
                >
                    <el-icon>
                        <Connection />
                    </el-icon>
                    <span>工作台</span>
                </el-badge>
            </el-menu-item>
            <el-menu-item index="1-4">
                <el-badge 
                    is-dot 
                    :offset="[10, 25]"
                >
                    <el-icon>
                        <Odometer />
                    </el-icon>
                    <span>仓库</span>
                </el-badge>
            </el-menu-item>
        </el-sub-menu> -->
    </el-menu>
</template>

<script lang="ts" setup>
    import { ref, reactive, markRaw, onBeforeMount, onMounted, onBeforeUnmount, nextTick, computed, watch  } from 'vue'
    import type { Ref, Raw } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    import { storeToRefs } from 'pinia'
    import { useStore } from '@/store'
    import {
        Document,
        Menu as IconMenu,
        Setting,
        House,
        Notification,
        Connection,
        Odometer,
        Lock,
        Search,
        Bell,
        FullScreen,
        Refresh,
        CircleClose,
        Warning,
        Fold,
        Expand
    } from '@element-plus/icons-vue'
    import HomeMenuItem from './homeMenuItem/HomeMenuItem.vue'
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    // 定义组件名字
    // defineOptions({
    //     name: "Self",
    // });

    const tabsArr = defineModel<any[]>('tabsArr', {
        required: false,
        default: []
    })
    const currentTab = defineModel<string>('currentTab', {
        required: false,
        default: ''
    })
    const defaultActive = defineModel<string>('defaultActive', {
        required: false,
        default: ''
    })
    const props = withDefaults(defineProps<{
        isCollapse?: boolean, //折叠面板
        menuItems?: any[], 
    }>(), {
        isCollapse: false,
        menuItems: () => [],
    })
    const emits = defineEmits<{
        // (e: 'update:isCollapse', data: boolean): void,
        // 'update:isCollapse': [data: boolean]
        // 'addTaabsVal': [data: any[]]
    }>()

    // const menuItems: Ref<any[]> = ref([
    //     {
    //         iconName: House,
    //         title: '首页',
    //         routerPath: '/',
    //         menuType: 'subMenu', //subMenu, menuItemGroup, menuItem
    //         idDot: false,
    //         offset: [],
    //         children: [
    //             {
    //                 iconName: House,
    //                 title: '首页',
    //                 routerPath: '/index',
    //                 menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
    //                 idDot: false,
    //                 offset: [],
    //                 children: [],
    //             },
    //             {
    //                 iconName: Notification,
    //                 title: '看板',
    //                 routerPath: '/index2',
    //                 menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
    //                 idDot: false,
    //                 offset: [],
    //                 children: [],
    //             },
    //             {
    //                 iconName: Connection,
    //                 title: '工作台',
    //                 routerPath: '/index',
    //                 menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
    //                 idDot: true,
    //                 offset: [10, 25],
    //                 children: [],
    //             },
    //             {
    //                 iconName: Odometer,
    //                 title: '仓库',
    //                 routerPath: '/index2',
    //                 menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
    //                 idDot: true,
    //                 offset: [10, 25],
    //                 children: [],
    //             },
    //         ],
    //     },
    //     {
    //         iconName: IconMenu,
    //         title: '组件',
    //         routerPath: '/index2',
    //         menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
    //         idDot: false,
    //         offset: [],
    //         children: [],
    //     },
    //     {
    //         iconName: Document,
    //         title: '其他',
    //         routerPath: '/index2',
    //         menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
    //         idDot: false,
    //         offset: [],
    //         children: [],
    //     },
    //     {
    //         iconName: Setting,
    //         title: '配置',
    //         routerPath: '/index2',
    //         menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
    //         idDot: false,
    //         offset: [],
    //         children: [],
    //     },
    //     {
    //         iconName: Warning,
    //         title: '403',
    //         routerPath: '/index2',
    //         menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
    //         idDot: false,
    //         offset: [],
    //         children: [],
    //     },
    //     {
    //         iconName: Warning,
    //         title: '404',
    //         routerPath: '/index2',
    //         menuType: 'menuItem', //subMenu, menuItemGroup, menuItem
    //         idDot: false,
    //         offset: [],
    //         children: [],
    //     },
    // ])
    
    
    
    const handleOpen = (key: string, keyPath: string[]) => {
        // console.log(key, keyPath)
    }
    const handleClose = (key: string, keyPath: string[]) => {
        // console.log(key, keyPath)
    }

    const handleSelect = (key: string, keyPath: string[]) => {
        // console.log(key, keyPath)
        currentTab.value = key
        defaultActive.value = key
        let bianli = (data) => {
            for (let i=0; i<data.length; i++) {
                if (data[i].routerPath == key) {
                    if (!tabsArr.value.some((item, index) => {
                        return item.routerPath == key
                    })) {
                        tabsArr.value.push(data[i])
                    }
                    return true;
                } else if (data[i].children?.length > 0) {
                    bianli(data[i].children)
                }
                
            }
        }
        bianli(props.menuItems)
    }
    // watch(() => route.path, (nval, oval) => {
    //     handleSelect(nval, [])
    // }, {
    //     immediate: true
    // })
</script>

<style lang="scss" scoped>
    .my-menu-vertical {
        height: 100%;
    }
    .my-menu-vertical:not(.el-menu--collapse) {
        width: 300px;
        // height: 100%;
    }
</style>